<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Visual Basic Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, .NET, Winforms, Visual Basic, Mono, Introduction">
<meta name="description" content="Introduction to Visual Basic Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Visual Basic Winforms</h1>

<p>
In this part of the Visual Basic Winforms programming tutorial, we will 
introduce the Winforms library and
create our first programs using the Visual Basic programming language.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the Winforms 
and Visual Basic. Images used in this tutorial can be downloaded 
<a href="/img/gui/vbwinf/images.zip">here</a>. I used some icons from the
tango icons pack of the Gnome project. 
</p>


<h2>About</h2>

<p>
<b class="keyword">Windows Forms</b> is a graphical user interface 
application programming interface 
(API) included as a part of Microsoft's .NET Framework. As of 13 May 2008, 
Mono's System.Windows.Forms 2.0 is API complete. Simply put, Winforms 
is a library for creating GUI applications.  
</p>

<p>
<b class="keyword">Mono</b> is a cross platform, open source .NET development framework.
It is a .NET compatible set of tools, which include C# compiler, Visual Basic compiler,
Common Language Runtime, ADO.NET, ASP.NET and Winforms libraries. 
</p>

<pre>
vbnc -r:/usr/lib/mono/2.0/System.Windows.Forms.dll quitbutton.vb
</pre>

<p>
The above command shows, how to compile the quitbutton example. The -r parameter of the
mono VB compiler loads the Winforms assembly. It is a dynamic library. The commnad shows
a path to the dll library on a Ubuntu system. 
</p>


<h2>Centering a window</h2>

<p>
In the second example, we will center the window
on the screen. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program centers a window
' on the screen
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "Center"
       Me.Size = New Size(250, 200)
       Me.CenterToScreen

    End Sub


   Public Shared Sub Main
        Application.Run(New WinVBApp)
   End Sub
   
End Class
</pre>

<p>
This code example shows a small window in the center of the screen. 
</p>


<pre class="explanation">
 Imports System.Windows.Forms
 Imports System.Drawing
</pre>

<p>
The <b class="keyword">Imports</b> keyword imports necessery types that we will use
in the application.
</p>

<pre class="explanation">
 Public Class WinVBApp
     Inherits Form
</pre>

<p>
In Winforms, any window or a dialog is a Form. This control is a basic container,
whose purpose is to display other child controls. Our class inherits from a form.
This way it becomes a form itself.
</p>

<pre class="explanation">
 Public Sub New
 ...
 End Sub
</pre>

<p>
In the constructor, we set up the application.
</p>

<pre class="explanation">
 Me.Text = "Center"
</pre>

<p>
Here we set a title for the form. 
</p>

<pre class="explanation">
 Me.Size = New Size(250, 200)
</pre>

<p>
We set a size for the form. 
</p>

<pre class="explanation">
 Me.CenterToScreen
</pre>

<p>
This code line centers a window on the screen. 
</p>


<pre class="explanation">
 Public Shared Sub Main
     Application.Run(New WinVBApp)
 End Sub
</pre>

<p>
We run the example. 
</p>


<h2>Icon</h2>

<p>
Mono means monkey in Spanish. If we do not provide an icon for our application, 
we have a head of a monkey by default. The next example shows, how to change this. 
</p>

<pre class="code">

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows an icon in the
' title bar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing

Public Class WinVBApp
    Inherits Form

    Public Sub New
    
       Me.Text = "Icon"
       Me.Size = New Size(250, 200)

       Try 
           Icon = New Icon("web.ico")
       Catch e As Exception
           Console.WriteLine(e.Message)
           Environment.Exit(1)
       End Try
       
       Me.CenterToScreen
       
    End Sub

    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
The code example shows an icon in the upper left corner of the form.
 A form's icon is the picture that represents the form in 
the taskbar as well as the icon that is displayed for the control box of the form. 
</p>


<pre class="explanation">
 Try 
     Icon = New Icon("web.ico")
 Catch e As Exception
     Console.WriteLine(e.Message)
     Environment.Exit(1)
 End Try
</pre>

<p>
It is a good practice to put all input output work between the Try/Catch keywords. 
The web.ico file must be available in the current working directory. 
This is the directory from where we execute (./icon.exe) our application. 
</p>


<br>
<img src="/img/gui/vbwinf/icon.png" alt="Icon">
<div class="figure">Figure: Icon</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a quit
' button. When we press the button,
' the application terminates. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "Quit button"
       Me.Size = New Size(250, 200)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim button As New Button

        button.Location = New Point(30, 20)
        button.Text = "Quit"
        button.Parent = Me

        AddHandler button.Click, AddressOf Me.OnClick
        
        Me.CenterToScreen
        
    End Sub

    Private Sub OnClick(ByVal sender As Object, ByVal e As EventArgs)
       Me.Close
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
We use the <b class="keyword">Button</b>. This is a very common widget.
It is a rectangular and usually shows a text label. 
</p>

<pre class="explanation">
 Me.InitUI
</pre>

<p>
We delegate the creation of the user interface to the <b class="keyword">InitUI</b> method.
</p>

<pre class="explanation">
 Dim button As New Button

 button.Location = New Point(30, 20)
 button.Text = "Quit"
 button.Parent = Me
</pre>

<p>
We create the button widget. We position it on the form.
Provide a label for it and put it inside the form container.
</p>

<pre class="explanation">
 AddHandler button.Click, AddressOf Me.OnClick
</pre>

<p>
When we click on the button, the <b class="keyword">Click</b> event is triggered.
We react to this event with the <b class="keyword">OnClick</b> method. 
</p>

<pre class="explanation">
 Private Sub OnClick(ByVal sender As Object, ByVal e As EventArgs)
     Me.Close
 End Sub
</pre>

<p>
The <b class="keyword">OnClick</b> method terminates the application.
</p>

<br>
<img src="/img/gui/vbwinf/quit.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<hr class="btm">

<p>
This section was an introduction to the Winforms library with the Visual Basic language.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 2, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

